<!--注册页面模板-->
<template>
	<div class="hello">
		<el-container>
			<el-header>
				<div class="heard_top">
					<div class="top">
						<div class="top_left">杭州天缘网络欢迎您！</div>
						<div class="top_right">
							<img src="../../assets/wenhao.png" alt="" />
							<span>帮助中心</span>
						</div>
					</div>
				</div>
				<div class="heard_bot">
					<div class="bot">
						<div class="top_left">
							<img src="../../assets/ka_pur.png" class="img1" />
							<img src="../../assets/jifenka.png" class="img2" />
						</div>
						<div class="top_right">
							<span style="color: #898989;">我已注册，现在就</span>
							<el-button class="login" @click="toLogin">登录</el-button>
						</div>
					</div>
				</div>
			</el-header>
			<el-main>
				<el-col :span="24">
					<div class="main_box">
						<div class="img_box">
							<img src="../../assets/yinying.png"/>
							<div class="info_box">
								<div class="top_pur">注册会员</div>
								<router-view/>
							</div>
						</div>
					</div>
				</el-col>
				<div class="fore_pic">
					<img src="../../assets/kuaisufenxiao2x.png" alt="" />
					<img src="../../assets/anquanjiaoyi2x.png" alt="" />
					<img src="../../assets/jingzhunjisuan2x.png" alt="" />
					<img src="../../assets/zhuanshukefu2x.png" alt="" />
				</div>
			</el-main>
			<el-footer>
				<div class="foot_top">
					<span>关于我们</span>
					<span>|</span>
					<span>公司荣誉</span>
					<span>|</span>
					<span>联系我们</span>
				</div>
				<div class="foot_bot">Copyright © 2015.版权所有</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				inputaccount:'',
				show1:true,
				show2:true
			}
		},
		methods: {
			toLogin(){
				this.$router.push({
					name: 'accountlogin'
				});
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.el-header {
		width: 100%;
		height: 135px !important;
		padding: 0;
	}
	.heard_top {
		width: 100%;
		height: 40px;
		background-color: #454545;
		color: white;
	}
	.heard_top .top {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		line-height: 40px;
		font-size: 14px;
	}
	.heard_top .top img {
		width: 18px;
		height: 18px;
		vertical-align: top;
		margin-top: 11px;
	}
	.heard_bot {
		width: 100%;
		height: 95px;
		background-color: white;
	}
	.heard_bot .bot {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		color: #7b5bc7;
		line-height: 95px;
	}
	.top_left .img1 {
		width: 41px;
		vertical-align: top;
		margin-top: 25px;
	}
	.top_left .img2 {
		width: 85px;
		vertical-align: top;
		margin-top: 30px;
	}
	.el-main {
		padding: 0;
		height: 725px;
	}
	.el-col {
		width: 100%;
		height: 540px;
	}
	.el-col .main_box {
		width: 100%;
		height: 462px;
	}
	.main_box .img_box{
		width: 1200px;
		height: 100%;
		margin: 0 auto 0;
	}
	.main_box .img_box img{
		width: 1200px;
		height: 1px;
	}
	.main_box .img_box .info_box{
		width: 850px;
		height: 430px;
		border: 1px solid #e9e9e9;
		border-radius: 3px;
		margin: 50px auto 0;
	}
	.info_box .top_pur{
		width: 100%;
		height: 76px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		text-align: center;
		line-height: 76px;
		color: white;
		font-size: 24px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.fore_pic {
		width: 1200px;
		height: 165px;
		margin: 0 auto 0;
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-between;
	}
	.fore_pic img {
		width: 293px;
	}
	.el-footer {
		width: 100%;
		height: 220px !important;
		padding: 0;
		background-color: #fafafa;
	}
	.foot_top,.foot_bot {
		font-size: 14px;
		color: 666666;
	}
	.foot_top {
		width: 300px;
		text-align: center;
		display: flex;
		margin: 80px auto 0;
	}
	.foot_top span {
		width: 60px;
	}
	.foot_bot {
		width: 200px;
		text-align: center;
		margin: 0 auto 0;
		margin-top: 36px;
	}
	.login{
		width: 58px;
		height: 28px;
		background-color: #f4f4f4;
		border: 1px solid #e9e9e9;
		text-align: center;
		line-height: 28px;
		padding: 0;
		color: #727272;
	}
	ul.third_input{
		width: 334px;
		padding-top: 24px;
		margin: 0 auto;
	}
	ul.third_input li{
		padding-top: 20px;
	}
	ul.third_input li .password{
		width: 185px;
	}
	ul.third_input li .getcode{
		width: 127px;
		height: 40px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		color: white;
		margin-left: 16px;
	}
	ul.third_input li .next{
		width: 334px;
		height: 42px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		color: white;
		font-size: 14px;
	}
</style>